<template>
	<view class="content" :style="{'padding-top':top+'px','min-height':windowheight+'px'}">
		<Navbar title="积分兑换" bgColor="#da708b" :backIcon="false" style="color: #ffffff;z-index: 1;"></Navbar>
		<view class="point_redeem">
			<view class="pr_mypoint">
				<text class="prm_txt1">当前可用积分：</text>
				<text class="prm_txt2">{{mypoints}}</text>
			</view>
		</view>
		<view class="redeem_list">
			<view class="redeeml_item" v-for="(item,index) in coupons" :key="index">
				<view class="redli_con">
					<text class="redlic_txt1">{{item.goodsName}}</text>
					<text class="redlic_txt2">{{item.goodsDescription}}</text>
				</view>
				<view class="redli_jfs">需消耗{{item.goodsPointNum}}积分兑换</view>
				<view>
					<button type="default" size="mini" class="redli_btn" @tap.stop="exchange(item.id)">兑 换</button>
				</view>
			</view>
		
		</view>
	</view>
</template>
<script setup>
	import { ref,onMounted } from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const baseUrl = getApp().globalData.baseUrl
	const title=ref('Hello')
	const windowheight=ref()
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const client_no = ref(JSON.parse(uni.getStorageSync("user_info")).client_no)
	const mypoints = ref(0)
	const coupons = ref([{
			id: 1,
			cou_tit: "5元满减券",
			condition: "满50元可用",
			point_num: 100
		},
		{
			id: 1,
			cou_tit: "10元满减券",
			condition: "满100元可用",
			point_num: 200
		},
		{
			id: 1,
			cou_tit: "8.8折优惠券",
			condition: "满50元可用",
			point_num: 100
		},
	])
	const reload = () => {
		const pages = getCurrentPages()
		console.log(pages)
		const curpage = pages[pages.length - 1]
		console.log(curpage)
		curpage.onLoad()
		curpage.onShow()
		curpage.onReady()
	}
	const exchange = (id) => {
		//console.log(id)
		uni.showModal({
			title: "兑换确认",
			content: "兑换后将扣除相应积分且无法返回，确定要兑换吗？",
			cancelText: "取消",
			confirmText: "确定",
			success: (res) => {
				console.log(res)
				if (res.confirm) {
					uni.request({
						url: getApp().globalData.baseUrl + "/goods/buy",
						method: "GET",
						header: {
							'content-type': 'application/json',
							'Access-Control-Allow-Origin': "*",
							'Authorization': uni.getStorageSync('token')
						},
						data: {
							goodsId: id,
							clientNo:client_no.value
						},
						success: (res) => {
							console.log(res)
							if(res.data.code===300){
								uni.showToast({
									title: res.data.msg,
									duration: 2000,
									position: "center",
									icon:"error"
								})
							}else{
								uni.showModal({
									title: "成功提示",
									content: "兑换成功！",
									confirmText: "继续兑换",
									cancelText: "返回首页",
									success: (res) => {
										if (res.confirm) {
											reload()
										} else if (res.cancel) {
											uni.switchTab({
												url: "/pages/index/index"
											})
										}
									}
								})
							}
						},
						fail: (err) => {
							uni.showToast({
								title: "兑换失败！",
								duration: 2000,
								position: "center"
							})
						}
					})
				}
			}
		})
	}
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				windowheight.value=res.screenHeight
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = customBar.value
		windowheight.value=windowheight.value-top.value
		//console.log(statusBar.value, customBar.value, top.value,windowheight.value)
	}
	onShow(()=>{
		const now = new Date().getTime()
		if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}else{
			uni.request({
				url: getApp().globalData.baseUrl + "/getinfo",
				method: "GET",
				header: {
					'content-type': 'application/json',
					'Access-Control-Allow-Origin': "*",
					'Authorization': uni.getStorageSync('token')
				},
				data: {
					openId: JSON.parse(uni.getStorageSync("user_info")).openId
				},
				success: (res) => {
					console.log(res)
					mypoints.value = res.data.value.clientPoints
				},
				fail: (err) => {
					console.log(err)
				}
			})
			uni.request({
				url: getApp().globalData.baseUrl + "/goods/list",
				method: "POST",
				header: {
					'content-type': 'application/json',
					'Access-Control-Allow-Origin': "*",
					'Authorization': uni.getStorageSync('token')
				},
				data: {
					searchParamet:""
				},
				success: (res) => {
					console.log(res)
					coupons.value = res.data.value
				},
				fail: (err) => {
					console.log(err)
				}
			
			})
		}
	})
	onMounted(()=>{
		getColumnHeight()
	})
</script>
<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		//background-image: linear-gradient(to bottom,#d95e7d,#ffffff);
	}
	.point_redeem {
		background: url("http://zzqjt.oss-cn-hangzhou.aliyuncs.com/templates/client/res/b603ceb007cf42938e722d8cd2edbd8f-my-bg.png");
		background-size: 100%;
		background-origin: border-box;
		width: 100%;
		padding-top: 80rpx;
		height: 160rpx;
	}
	
	.pr_mypoint {
		border-radius: 10rpx;
		background-color: #fff;
		width: 92%;
		height: 120rpx;
		margin: auto;
		margin-top: 60rpx;
		line-height: 120rpx;
		padding-left: 20rpx;
	}
	
	.prm_txt1 {
		font-size: 24rpx;
	}
	
	.prm_txt2 {
		font-size: 48rpx;
		font-weight: bold;
		color: #e77c90;
	}
	
	.redeem_list {
		margin-top: 60rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.redeeml_item {
		width: 48%;
		background-color: rgba(220, 221, 248, 0.4);
		border-radius: 6rpx;
		margin: 6rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.redli_con {
		width: 80%;
		height: 170rpx;
		background-color: #e77c90;
		margin: 20rpx;
		border-radius: 6rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		color: #fff;
	}
	
	.redlic_txt1 {
		width: 80%;
		font-size: 36rpx;
		font-weight: bold;
		padding: 20rpx;
		border-bottom: 1px dashed #eee;
	}
	
	.redlic_txt2 {
		font-size: 28rpx;
		padding: 20rpx;
	}
	
	.redli_jfs {
		font-size: 24rpx;
	}
	
	.redli_btn {
		background-color: #e77c90;
		border-radius: 40rpx;
		color: #fff;
		margin: 20rpx 0;
	}
</style>